<template>
  <div class="ajax-table">
    <a-table
      :columns="columns"
      :row-key="(record) => record.login.uuid"
      :data-source="data"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template #name="{ record }">
        <span> {{ record.cell }}</span>
      </template>
      <template #operation="{ record }">
        <span @click="edit"> {{ record.gender }}</span>
      </template>
    </a-table>
    <div>
      <cDialog v-model:visible="visible">
        <template #text="{ data }">
          <p>{{ data }}</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <div>
            <cForm></cForm>
          </div>
        </template>
      </cDialog>
    </div>
  </div>
</template>
<script>
import { queryData_get } from "@/api/index";
import cDialog from "@/components/dialog/newIndex.vue";
import cForm from "@/views/Home/form.vue";
const columns = [
  {
    title: "Phone",
    dataIndex: "Phone",
    sorter: true,
    width: "20%",
    // scopedSlots: { customRender: "name" }, 1.x版本的插槽作用域用法
    slots: {
      customRender: "name", // 2.x版本的插槽作用域用法
    },
  },
  {
    title: "Gender",
    dataIndex: "gender",
    filters: [
      { text: "Male", value: "male" },
      { text: "Female", value: "female" },
    ],
    width: "20%",
  },
  {
    title: "Email",
    dataIndex: "email",
  },
  {
    title: "operation",
    dataIndex: "operation",
    text: "123",
    // fixed: 'right',
    // scopedSlots: { customRender: "operation" },
    slots: {
      customRender: "operation",
    },
  },
];

export default {
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  data() {
    return {
      data: [],
      pagination: {
        position: "bottom",
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "15", "25"],
        defaultPageSize: 5,
        current: 1,
      },
      loading: false,
      columns,
      visible: false,
      item: null,
      selectedRowKeys: [], // Check here to configure the default column
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    oper(text, record, index) {
      console.log(text, index);
      this.item = record;
      this.visible = true;
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      this.loading = true;
      queryData_get({
        results: 10,
        ...params,
      }).then((data) => {
        const pagination = { ...this.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        console.log(data, "sas");
        pagination.total = 200;
        this.loading = false;
        this.data = data.results;
        this.pagination = pagination;
      });
    },
    edit() {
      this.visible = true;
    },
  },
  components: {
    cDialog,
    cForm,
  },
};
</script>
